<template>
  <el-container class="setting-center_mall-info-setting_building-info">
    <el-main>
      <el-card shadow="never" class="building-info-container">
        <div class="building-container">
          <div class="left-container">
            <div class="btn-row">
              <el-button type="primary" size="mini" icon="el-icon-plus" @click="openModal()">新增</el-button>
            </div>
            <el-card shadow="never" class="building-list-card">
              <el-tree
                ref="tree"
                :data="data"
                :props="defaultProps"
                :highlight-current="true"
                :check-on-click-node="true"
                :expand-on-click-node="false"
                node-key="id"
                :current-node-key="currentNodekey"
                @node-click="handleNodeClick"
              />
            </el-card>
          </div>
          <div class="right-container">
            <!-- 楼栋信息编辑 -->
            <el-form v-if="typeCheck" ref="buildingInfoForm" :model="params" :rules="rules" label-width="6rem">
              <el-row :gutter="40">
                <el-col :span="12">
                  <el-form-item label="楼栋名称：" prop="name">
                    <el-input v-model="params.name" :disabled="diabledEdit" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="总共楼层：" prop="floor" class="flex-just">
                    <el-input-number v-model="params.floor" :disabled="diabledEdit" :max="100" :min="1" :precision="0" :controls="!diabledEdit" controls-position="right" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="楼栋编号：" prop="code">
                    <el-input v-model="params.code" :disabled="diabledEdit" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注：" prop="remark">
                    <el-input v-model="params.remark" type="textarea" :rows="3" :disabled="diabledEdit" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="楼栋图片：" class="redLabel">
                    <upload ref="buildImgUpload" class="load-cont" :limit="1" :file-list="buildingFileList" :disabled="diabledEdit" :file-filter="filterImgType" :name-show="false" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <!-- 楼层信息编辑 -->
            <el-form v-if="!typeCheck" ref="floorInfoForm" :model="params" :rules="rules" label-width="9rem">
              <el-row :gutter="40">
                <el-col :span="12">
                  <el-form-item label="楼层编号：" prop="code">
                    <el-input v-model="params.code" :disabled="diabledEdit" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="楼层名称：" prop="name">
                    <el-input v-model="params.name" :disabled="diabledEdit" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="楼层面积(m²)：" prop="buildArea">
                    <el-input-number v-model="params.buildArea" :disabled="diabledEdit" class="inputNumRight" :precision="2" :controls="false" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="记租面积(m²)：" prop="useArea">
                    <el-input-number v-model="params.useArea" :disabled="diabledEdit" class="inputNumRight" :precision="2" :controls="false" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="铺位数：" prop="shops" class="flex-just">
                    <el-input-number v-model="params.shops" :disabled="diabledEdit" :max="100" :min="1" :precision="0" :controls="!diabledEdit" controls-position="right" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="楼层导航地图：" prop="svgImage">
                    <upload ref="floorImgUpload" class="load-cont" :limit="1" :file-list="fileList" :disabled="diabledEdit" :file-filter="filterImgType" :name-show="false" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="button-list">
              <el-button v-if="diabledEdit" type="primary" @click="change(false)">修改</el-button>
              <el-button v-if="!diabledEdit" type="primary" @click="update(true)">保存</el-button>
              <el-button v-if="params.id && !diabledEdit" type="danger" @click="delInfo(true)">删除</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </el-main>
    <el-dialog v-if="dialogVisible" width="60%" title="新增" :close-on-click-modal="false" :visible.sync="dialogVisible">
      <el-form ref="ruleForm" :model="dataInfo" label-width="7.5rem" :rules="rules">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="类型：" prop="type">
              <el-select v-model="dataInfo.type">
                <el-option label="楼栋" value="1" />
                <el-option label="楼层" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="dataInfo.type === '0'" :span="8">
            <el-form-item label="楼栋：" prop="build">
              <el-select v-model="dataInfo.build">
                <el-option v-for="item in data" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="dataInfo.type === '1'" :span="8">
            <el-form-item label="楼栋编码：" prop="buildCode">
              <el-input v-model="dataInfo.buildCode" />
            </el-form-item>
          </el-col>
          <el-col v-if="dataInfo.type === '1'" :span="8">
            <el-form-item label="楼栋名称：" prop="buildName">
              <el-input v-model="dataInfo.buildName" />
            </el-form-item>
          </el-col>
          <el-col v-if="dataInfo.type === '1'" :span="8" class="flex-just">
            <el-form-item label="总共层数：" prop="floor" class="flex-just">
              <el-input-number v-model="dataInfo.floor" :disabled="false" :max="100" :min="1" :precision="0" :controls="true" controls-position="right" />
            </el-form-item>
          </el-col>

          <el-col v-if="dataInfo.type === '1'" :span="24">
            <el-form-item label="备注：" prop="remark">
              <el-input v-model="dataInfo.remark" type="textarea" :rows="3" />
            </el-form-item>
          </el-col>
          <el-col v-if="dataInfo.type === '0'" :span="8">
            <el-form-item label="楼层编码：" prop="floorCode">
              <el-input v-model="dataInfo.floorCode" />
            </el-form-item>
          </el-col>
          <el-col v-if="dataInfo.type === '0'" :span="8">
            <el-form-item label="楼层名称：" prop="floorName">
              <el-input v-model="dataInfo.floorName" />
            </el-form-item>
          </el-col>
          <el-col v-if="dataInfo.type === '0'" :span="8">
            <el-form-item label="楼层面积(m²)：" prop="buildArea">
              <el-input-number v-model="dataInfo.buildArea" class="inputNumRight" :precision="2" :controls="false" />
            </el-form-item>
          </el-col>
          <el-col v-if="dataInfo.type === '0'" :span="8">
            <el-form-item label="记租面积(m²)：" prop="useArea">
              <el-input-number v-model="dataInfo.useArea" class="inputNumRight" :precision="2" :controls="false" />
            </el-form-item>
          </el-col>
          <el-col v-if="dataInfo.type === '0'" :span="8">
            <el-form-item label="商户数量(个)：" prop="shops">
              <el-input v-model="dataInfo.shops" />
            </el-form-item>
          </el-col>
          <el-col v-if="dataInfo.type === '0'" :span="24">
            <el-form-item label="楼层导航地图：" prop="svgImage">
              <div>
                <upload ref="uploadImg" class="load-cont" :limit="1" :disabled="false" :file-filter="filterImgType" :name-show="false" />
                <span>上传图片格式为：jpg、jpeg、png、icon、gif、bmp、svg</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col v-if="dataInfo.type === '1'" :span="24">
            <el-form-item label="楼栋图片：" prop="svgImage">
              <div>
                <upload ref="buildImgAddUpload" class="load-cont" :limit="1" :disabled="false" :file-filter="filterImgType" :name-show="false" />
                <span>上传图片格式为：jpg、jpeg、png、icon、gif、bmp、svg</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import upload from '@/components/upload'
import { addBuild, modifyBuild, getBuild, getBuildPageList, delBuild, addFloor, modifyFloor, getFloor, delFloor } from '@/api/tenement'
export default {
  components: {
    upload
  },
  data() {
    return {
      options: [],
      buildingFileList: [],
      dialogVisible: false,
      diabledEdit: true,
      currentNodekey: '',
      rules: {
        floorName: [
          { required: true, message: '请填写楼层名称', trigger: 'blur' }
        ],
        floorCode: [
          { required: true, message: '请填写楼层编码', trigger: 'blur' }
        ],
        buildName: [
          { required: true, message: '请填写楼栋名称', trigger: 'blur' }
        ],
        buildCode: [
          { required: true, message: '请填写楼栋编码', trigger: 'blur' }
        ],
        floor: [
          { required: true, message: '请填写总共层数', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请填写备注信息', trigger: 'blur' }
        ],
        buildArea: [
          { required: true, message: '请填写楼层面积', trigger: 'blur' }
        ],
        useArea: [
          { required: true, message: '请填写计租面积', trigger: 'blur' }
        ],
        svgImage: [
          { required: true, message: '请选择楼层导航图', trigger: 'blur' }
        ],
        shops: [
          { required: true, message: '请填写商户数量', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'blur' }
        ],
        build: [
          { required: true, message: '请选择楼栋', trigger: 'blur' }
        ]
      },
      fileList: [],
      params: {
        name: ''
      },
      defaultProps: {
        children: 'floors',
        label: 'name'
      },
      dataInfo: {
        type: '1'
      },
      data: [],
      typeCheck: true,
      filterImgType: ['jpg', 'jpeg', 'png', 'icon', 'gif', 'bmp', 'svg', 'JPG', 'JPEG', 'PNG', 'ICON', 'GIF', 'BMP', 'SVG']
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleNodeClick(data) {
      this.diabledEdit = true
      if (data.floors && data.floors.length > -1) {
        this.typeCheck = true
        getBuild(data.id).then(response => {
          this.params = response || {}
          if (this.params.imgUrl) {
            this.buildingFileList = []
            if (this.params.imgUrl && this.params.imgUrl.length > 0) {
              this.params.imgUrl.forEach(item => {
                this.buildingFileList.push({
                  url: item
                })
              })
            }
          }
        })
      } else {
        this.typeCheck = false
        getFloor(data.id).then(response => {
          this.params = response || {}
          if (this.params.svgImage) {
            this.fileList = [
              {
                url: this.params.svgImage
              }
            ]
          }
        })
      }
    },
    delInfo(bool) {
      if (this.$demoUser.checkUser()) {
        alert('演示账号，不能执行此操作')
        return
      }
      this.diabledEdit = bool
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.typeCheck) {
          delBuild(this.params.id).then(response => {
            this.$message.success('删除成功')
            this.params = {}
            this.getList()
          })
        } else {
          delFloor(this.params.id).then(response => {
            this.$message.success('删除成功')
            this.params = {}
            this.getList()
          })
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    openModal() {
      this.dataInfo = {
        type: '1',
        svgImage: '1111'
      }
      this.dialogVisible = true
    },
    submit() {
      if (this.$demoUser.checkUser()) {
        alert('演示账号，不能执行此操作')
        return
      }
      if (this.dataInfo.type === '1') {
        if (this.$refs.buildImgAddUpload.key.length === 0) {
          this.$message.error('楼栋图片不允许为空')
          return
        }
        if (this.dataInfo.sort === undefined) { this.dataInfo.sort = 1 }
        this.dataInfo.name = this.dataInfo.buildName
        this.dataInfo.code = this.dataInfo.buildCode
        this.dataInfo.imgUrl = this.$refs.buildImgAddUpload.key.map(item => item.urlName)
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            addBuild(this.dataInfo).then(respone => {
              this.dialogVisible = false
              this.$message.success('添加成功')
              this.getList()
            })
          }
        })
      } else {
        if (this.$refs.uploadImg.key.length === 0) {
          this.$message.error('svg导入图不允许为空')
          return
        }
        if (this.dataInfo.sort === undefined) { this.dataInfo.sort = 1 }
        this.dataInfo.svgImage = this.$refs.uploadImg.key[0].urlName
        this.dataInfo.name = this.dataInfo.floorName
        this.dataInfo.code = this.dataInfo.floorCode
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            addFloor(this.dataInfo).then(respone => {
              this.dialogVisible = false
              this.$message.success('添加成功')
              this.getList()
            })
          }
        })
      }
    },
    change(bool) {
      this.diabledEdit = bool
    },
    update(bool) {
      if (this.$demoUser.checkUser()) {
        alert('演示账号，不能执行此操作')
        return
      }
      this.diabledEdit = bool
      if (this.params.id === undefined) {
        this.$message.error('请选择楼栋')
        return
      }
      if (this.typeCheck) {
        if (this.$refs.buildImgUpload.key.length === 0) {
          this.$message.error('楼栋图片不允许为空')
          return
        }
        this.params.imgUrl = this.$refs.buildImgUpload.key.map(item => item.urlName)
        this.$refs.buildingInfoForm.validate((valid) => {
          if (valid) {
            modifyBuild(this.params).then(response => {
              this.$message.success('修改成功')
              this.getList()
            })
          }
        })
      } else {
        if (this.$refs.floorImgUpload.key.length === 0) {
          this.$message.error('svg导入图不允许为空')
          return
        }
        this.params.svgImage = this.$refs.floorImgUpload.key[0].urlName
        this.$refs.floorInfoForm.validate((valid) => {
          if (valid) {
            modifyFloor(this.params).then(response => {
              this.$message.success('修改成功')
              this.getList()
            })
          }
        })
      }
    },
    getList() {
      getBuildPageList().then(response => {
        this.currentNodekey = response[0].id
        this.data = response
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.currentNodekey)
          this.handleNodeClick({ id: this.currentNodekey, floors: [] })
        })
      })
    }
  }
}
</script>

<style lang="scss">
.setting-center_mall-info-setting_building-info {
  .building-info-container {
    width: 100%;
    .el-card__body {
      padding: 20px;
    }
  }
  .map-info {
    width: 100%;
    height: 300px;
  }
  .building-container {
    display: flex;
    .left-container {
      margin-right: 20px;
      .btn-row {
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      .building-list-card {
        height: calc(100% - 50px);
        margin-top: 20px;
        width: 150px;
      }
    }
    .right-container {
      width: 100%;
      .button-list {
        padding-right: 20px;
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
      }
    }
  }
  .el-input-number__decrease, .el-input-number__increase {
    align-items: right;
  }
}
  .load-cont{
    .el-upload--picture-card{
      width: 300px;
      height: 200px;
      line-height:200px;
    }
    .el-upload-list__item{
      width: 300px;
      height: 200px;
    }
  }
</style>
